<template>
  <el-card>
    <div

      id="orderLineEchart"
      style="width: 100%; height: 510px"
    />
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted,watch } from 'vue'
import * as echarts from 'echarts'
import {gettodayinventorytrends } from '@/api/data'
import {ref, reactive } from 'vue'
let end = new Date()
let start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
const dates = ref([filterTime(start), filterTime(end)])
const res = {
  infor: 'true',
  qty1: 0,
  qty2:0,
  qty3:0,
  qty4: 0,
}
const SortNum = (a, b) => {
  return a - b
}
const getTrendDataInfo = async () => {
  let parmes = {
    startDate:dates.value[0],
    endDate:dates.value[1]
  }
  const result = await gettodayinventorytrends(parmes)
  if (result.errcode === 0) {
    let data = result.content;

    res.qty1 = data.qty1
    res.qty2 = data.qty2
    res.qty3 = data.qty3
    res.qty4 = data.qty4
    InitLineEachart('orderLineEchart', res)
    // TrendData.value = res.data

  }
}
getTrendDataInfo()
// const chart = ref()
// 初始化图表
let myChart = null
function InitLineEachart(ele, res) {
  // const ordersArr_ = ordersArr.sort(SortNum)
  // const salesArr_ = salesArr.sort(SortNum)
  const  option = {
  title: {
    text: '库龄分布',
    subtext: '今日',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '库存',
      type: 'pie',
      radius: '50%',
      data: [
        { value: res.qty1, name: '0-15天库龄' },
        { value: res.qty2, name: '16-30天库龄' },
        { value: res.qty3, name: '31-90天库龄' },
        { value: res.qty4, name: '90天以上库龄' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

  var chartDom = document.getElementById(ele)
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
watch(
  () => dates.value,
  (newValue, oldValue) => {
    getTrendDataInfo()
  }
);
const onResize = () => {
  // var opt = myChart.getOption()
  // myChart.clear()
  myChart && myChart.resize()
  // myChart.setOption(opt)
}
onMounted(() => {
  // InitLineEachart('orderLineEchart', res)
  window.addEventListener('resize', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
function filterTime(time) {
        let date = new Date(time);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
    }
</script>

<style lang="scss" scoped>
.line-chart {
.title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
}
</style>
